<template>
  <div>
    <LoginHeader/>
    <div class="ys-register-body">
      <div class="ys-register-body-a">
        <h5 :style="colorStyle" class="totle-a">{{ tips }}</h5>
        <div class="input_your_phone">
          <div class="input_your_password">
            <div class="font-toget"><h4 id="phone">输入电话:</h4></div><el-input v-model="registerInfo.userMobile" placeholder="请输入电话" size="large" style="width: 250px;margin-left: 100px;" @keyup="checkInfoAccuUserPhone"/>
          </div>
        </div>
        <h5 :style="colorStylea" class="totle-b">{{ tipsa }}</h5>
        <div class="input_your_Username">
          <div class="input_your_password">
            <div class="font-toget"><h4 id="userName">用户名:</h4></div><el-input v-model="registerInfo.username"  placeholder="请输入用户名"  size="large" style="width: 250px;margin-left: 100px;margin-top: 10px" @keyup="checkInfoAccuUserName"/>
          </div>
        </div>
        <h5 :style="colorStyleb" class="totle-c">{{ tipsb }}</h5>
        <div class="input_your_password">
          <div class="font-toget"><h4>输入密码:</h4></div><el-input v-model="registerInfo.password" type="password" placeholder="请输入密码" show-password size="large" style="width: 250px;margin-left: 100px;margin-top: 10px" @keyup="checkInfoAccuUserPwd"/>
        </div>
        <h5 :style="colorStylec" class="totle-c">{{ tipsc }}</h5>
        <div class="input_your_password_again">
          <div class="input_your_password">
            <div class="font-toget"><h4>二次密码:</h4></div><el-input v-model="registerInfo.repassword" type="password" placeholder="请再次输入密码" show-password size="large" style="width: 250px;margin-left: 100px;margin-top: 10px" @keyup="checkUserAccuRPwd"/>
          </div>
        </div>
        <el-row class="mb-4" id="regBtn">
          <el-button type="primary" id="btn" @click="registry">登录注册</el-button>
        </el-row>

      </div>
    </div>
    <LoginFooter/>
  </div>
</template>

<script>
import LoginHeader from "../components/LoginHeader";
import LoginFooter from "../components/LoginFooter";

export default {
  name: "ysregister",
  components: {LoginFooter, LoginHeader},
  data() {
    return {
      registerInfo: {
        username: '',
        userMobile: '',
        password: '',
        repassword: ''
      },
      tips: "",
      tipsa: "",
      tipsb: "",
      tipsc: "",
      colorStyle: "",
      colorStylea: "",
      colorStyleb: "",
      colorStylec: "",
      uPatternName: /^[a-zA-Z\u4E00-\u9FFF]{4,8}$/,
      uPatterPhone: /^1\d{10}$/,
      isRighta: false,
      isRightb: false,
      isRightc: false,
      isRightd: false,
      fun: null
    }
  },
  methods: {
    registry: function () {
      if (!(this.isRighta&&this.isRightb&&this.isRightc&&this.isRightd)) {
        this.tips = "请输入完整且正确的注册信息!";
        this.colorStyle = "color:red";
      } else {
        this.$axios
            .post('api/ysmall/ysRegistry', {
              username: this.registerInfo.username,
              userMobile: this.registerInfo.userMobile,
              password: this.registerInfo.password
            })
            .then((res) => {
              console.log(res)
              if (res.data.code === 200) {
                this.tips = "注册成功";
                this.colorStyle = "color:green";
                setTimeout(() => {
                  this.$router.push({path: '/ysLogin'})
                }, 2000)
              } else if (res.data.code === 420) {
                alert('密码错误,请重新输入')
              } else if (res.data.code === 410) {
                alert('用户名错误,请重新输入')
              }
            })
            .catch(() => {
              this.tips = "状态异常!";
              this.colorStyle = "color:red";
            })
      }
    },
    checkInfoAccuUserName: function () {
      if (this.registerInfo.username == "") {
        this.tipsa = "请输入用户名!";
        this.colorStylea = "color:red";
        this.isRighta = false;
      } else if (!this.uPatternName.test(this.registerInfo.username)) {
        this.tipsa = "用户名可以是4-8为字母、汉字组成";
        this.colorStylea = "color:red";
        this.isRighta = false;
      } else {
        this.isRighta = true;
        this.tipsa = "√";
        this.colorStylea = "color:green";
      }
    },
    checkInfoAccuUserPhone: function () {
      if (this.registerInfo.userMobile == "") {
        this.tips = "请输入电话号码!";
        this.colorStyle = "color:red";
        this.isRightb = false;
      } else if (!this.uPatterPhone.test(this.registerInfo.userMobile)) {
        this.tips = "电话号码格式不正确";
        this.colorStyle = "color:red";
        this.isRightb = false;
      } else {
        this.isRightb = true;
        this.tips = "√";
        this.colorStyle = "color:green";
      }
    },
    checkInfoAccuUserPwd: function () {
      if (this.registerInfo.password == "") {
        this.tipsb = "请输入密码";
        this.colorStyleb = "color:red";
        this.isRightc = false;
      }
      else if (this.registerInfo.password.length > 6 && this.registerInfo.password.length < 18) {

          if (/[0-9]/.test(this.registerInfo.password)) {
            this.tipsb = "弱";
            this.colorStyleb="color:red";
            this.isRightc=true;
          }
          if (/[a-zA-Z]/.test(this.registerInfo.password)) {
            this.tipsb = "中";
            this.colorStyleb="color:yellow";
            this.isRightc = true;
          }
          if (/[^0-9a-zA-Z_]/.test(this.registerInfo.password)) {
            this.tipsb = "强";
            this.colorStyleb="color:green";
            this.isRightc = true;
          }
          this.checkUserAccuRPwd();

      } else {
        this.tipsb = "密码长度应在6~18位之间!";
        this.colorStyleb = "color:red";
        this.isRightc = false;
      }
    },
    checkUserAccuRPwd: function () {
      if (this.registerInfo.repassword==""||this.registerInfo.password != this.registerInfo.repassword) {
        this.tipsc = "两次密码输入不一致!";
        this.colorStylec = "color:red";
        this.isRightd = false;
      } else {
        this.tipsb = "√";
        this.colorStyleb = "color:green";
        this.tipsc = "√";
        this.colorStylec = "color:green";
        this.isRightd = true;
      }
    },
    checkUserNameCan:function (){
      if(this.registerInfo.username!="")
      {
        this.$axios.get("api/userCheck/usercheckusername",{
          params:{
            username:this.registerInfo.username
          }
        }).then((res)=>{
          if(res.data.code==201)
          {
            console.log('用户名可用');
          }else{
            console.log('用户名不可用');
          }
        }).catch(()=>{
          console.log('状态异常');
        })
      }
    }
  },
mounted() {
// this.checkUserNameCan()
}

}
</script>

<style scoped>
h5 {
  font-weight: 400;
}

h4 {
  font-weight: 400;
  padding-left: 30px;
}

.totle-a {
  display: block;
  margin-left: 160px;
  position: absolute;
  padding-top: 20px;
}

.totle-b {
  display: block;
  margin-left: 160px;
  position: absolute;
  padding-top: 5px;
}

.totle-c {
  display: block;
  margin-left: 160px;
  position: absolute;
  padding-top: 3px;
}

.ys-register-body {
  width: 100%;
  height: 600px;
  /*border: 1px solid black;*/
  position: relative;
  overflow: hidden;
}

.ys-register-body-a {
  padding-top: 100px;
  width: 500px;
  height: 600px;
  /*border: 1px solid black;*/
  position: relative;
  overflow: hidden;
}

.input_your_phone {
  width: 400px;
  height: 60px;
  /*border: 1px solid black;*/
  position: relative;
  margin-top: 5%;
  overflow: hidden;
}

.font-toget {
  width: 100px;
  height: 38px;
  /*border: 1px solid blue;*/
  display: inline-block;
  position: absolute;
  margin-top: 11px;
  /*text-align: center;*/
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
}

.input_your_Username {

  width: 400px;
  height: 60px;
  /*border: 1px solid red;*/
  position: relative;
  margin-top: 10px;
}

.input_your_password {
  width: 400px;
  height: 60px;
  /*border: 1px solid orange;*/
  position: relative;
  margin-top: 10px;
}

.input_your_password_again {
  width: 400px;
  height: 60px;
  /*border: 1px solid green;*/
  position: relative;
  margin-top: 10px;
}

.input_your_Username > .font-toget > h4 {
  padding-left: 45px;
}

#regBtn {
  position: absolute;
  margin-left: 170px;
  margin-top: 30px;
}

#btn {
  width: 200px;
  border: none;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

#btn:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}
#phone{
  margin-top: -10px;
}
#userName{
  margin-left: 15px;
}
</style>